<template>
    <div class="index-board-list">
        <div
            class="index-board-item"
            v-for="(item, index) in buyData"
            :key="index"
            :class="['index-board-' + item.url,{'line-last':index%2 !==0}]"
        >
            <div class="index-board-item-inner">
                <h2>{{ item.title }}</h2>
                <p>{{ item.desc }}</p>
                <div class="index-board-button">
                    <router-link :to="'/details/'+item.url" class="button">立即购买</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            buyData: [
                {
                    title: "开放产品",
                    desc: "开发产品描述",
                    url:"openproduct"
                },
                {
                    title: "品牌营销",
                    desc: "品牌营销帮助你的产品更好地找到定位",
                    url:"logo"
                },
                {
                    title: "使命必达",
                    desc: "使命必达快速迭代永远保持最前端的速度",
                    url:"golife"
                },
                {
                    title: "勇攀高峰",
                    desc: "帮你勇闯高峰，到达事业的顶峰",
                    url:"heigh"
                },
            ],
        };
    },
};
</script>

<style scoped>
.index-board-list {
    overflow: hidden;
    margin-top: 15px;
}
.index-board-item {
    float: left;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.index-board-item-inner {
    min-height: 125px;
    padding-left: 120px;
}
.index-board-openproduct .index-board-item-inner {
    background: url(../../../assets/images/1.png) no-repeat;
}
.index-board-logo .index-board-item-inner {
    background: url(../../../assets/images/2.png) no-repeat;
}
.index-board-golife .index-board-item-inner {
    background: url(../../../assets/images/3.png) no-repeat;
}
.index-board-heigh .index-board-item-inner {
    background: url(../../../assets/images/4.png) no-repeat;
}
.index-board-item h2 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
}
.line-last {
    margin-right: 0;
}
.index-board-button {
    margin-top: 20px;
}
.lastest-news {
    min-height: 350px;
}
.new-item {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button {
    background: #4fc08d;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}
</style>